<template>
  <div>
    <link
      rel="stylesheet"
      href="http://at.alicdn.com/t/font_2293181_4sd3abbbtk3.css"
    />
    <div class="shouji">
      <i class="iconfont icon-Arrow-Left2" @click="jj"></i>
    </div>
    <div v-for="item in mw" :key="item.id">
      <div class="xiao">
        <h2>{{ item.title }}</h2>
      </div>
      <div class="zhu">
        <p>{{ item.tit }}</p>

        <h6>{{ item.cle }}</h6>
        <!-- <img :src="mw.img" alt=""> -->
        <img :src="require(`../assets/${item.img}`)" alt="" />
      </div>
    </div>

    <div class="pinbo">
      <ul>
        <li>
          <i class="iconfont icon-fenxiang" @click="showShare = true"></i>分享
          <van-share-sheet
            v-model="showShare"
            title="立即分享给好友"
            :options="options"
            @select="onSelect"
          />
          
        </li>
        <li><i class="iconfont icon-shoucang"></i> 收藏</li>
        <li><i class="iconfont icon-tansuo ccc"></i>探索</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import axios from "axios";
import { getlistcon } from "@/api";
export default {
  data() {
    return {
      mw: [],
      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        //  showShare: false,
        // options: [
        //   { name: '微信', icon: 'wechat' },
        //   { name: '微博', icon: 'weibo' },
        //   { name: '复制链接', icon: 'link' },
        //   { name: '分享海报', icon: 'poster' },
        //   { name: '二维码', icon: 'qrcode' },
        // ],
      ],
    };
  },
  mounted() {
    let { id } = this.$route.query;
    // axios({
    //   url:"http://192.168.9.24:3000/listcon?id=" + id,
    // }).then(res=>{
    //   // console.log(res,"sss")
    //   this.mw = res.data
    // })
    getlistcon(id).then((res) => {
      this.mw = res.data;
    });
  },
  methods: {
    jj() {
      this.$router.history.go(-1);
    },

     onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
  },
};
</script>

<style scoped>
.ccc {
  color: red;
}
.pinbo {
  width: 100%;
  height: 60px;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #fff;
  border-top: 1px solid rgb(168, 168, 168);
}
.pinbo ul {
  width: 95%;
  margin: 0 auto;
  display: flex;
  list-style: none;
  justify-content: space-between;
  font-size: 20px;
  margin-top: 15px;
}
.pinbo i {
  font-size: 25px;
}
.zhu img {
  width: 97%;
  margin: 0 auto;
  margin-top: 20px;
}
.zhu h6 {
  width: 94%;
  margin: 0 auto;
  margin-top: 20px;
  color: rgb(41, 41, 41);
}
.zhu {
  width: 100%;
  margin-top: 20px;
}
.zhu p {
  width: 95%;
  margin: 0 auto;
  color: rgb(56, 55, 55);
}
.shouji {
  height: 30px;
  border-bottom: 1px solid rgb(204, 203, 203);
}
.xiao {
  width: 100%;
  text-align: center;
  margin-top: 20px;
  color: rgb(66, 66, 66);
}
.xiao h2 {
  width: 90%;
  margin: 0 auto;
}
</style>
